<template>
  <div class="analysis-case">
    <n-card title="分析用例管理">
      <n-space vertical>
        <!-- 工具栏 -->
        <n-space justify="space-between">
          <n-space>
            <n-button type="primary" @click="showCreateModal = true">
              <template #icon>
                <n-icon><AddOutline /></n-icon>
              </template>
              新建用例
            </n-button>
            <n-button @click="handleImport">
              <template #icon>
                <n-icon><DownloadOutline /></n-icon>
              </template>
              导入用例
            </n-button>
          </n-space>
          <n-space>
            <n-input v-model:value="searchText" placeholder="搜索用例..." style="width: 200px;" />
          </n-space>
        </n-space>

        <!-- 用例列表 -->
        <n-card title="用例列表">
          <n-list>
            <n-list-item v-for="case_ in filteredCases" :key="case_.id">
              <n-thing :title="case_.name" :description="case_.description">
                <template #avatar>
                  <n-icon size="24">
                    <DocumentTextOutline />
                  </n-icon>
                </template>
              </n-thing>
            </n-list-item>
          </n-list>
        </n-card>
      </n-space>
    </n-card>

    <!-- 创建用例对话框 -->
    <n-modal v-model:show="showCreateModal" preset="card" title="新建分析用例" style="width: 600px">
      <n-form :model="newCase" label-placement="left" label-width="100">
        <n-form-item label="用例名称">
          <n-input v-model:value="newCase.name" placeholder="输入用例名称" />
        </n-form-item>
        <n-form-item label="描述">
          <n-input v-model:value="newCase.description" type="textarea" placeholder="输入用例描述" />
        </n-form-item>
        <n-form-item label="分类">
          <n-select v-model:value="newCase.category" :options="categoryOptions" />
        </n-form-item>
      </n-form>
      <template #footer>
        <n-space justify="end">
          <n-button @click="showCreateModal = false">取消</n-button>
          <n-button type="primary" @click="handleCreateCase">创建</n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { AddOutline, DownloadOutline, DocumentTextOutline } from '@vicons/ionicons5'

// 响应式数据
const searchText = ref('')
const showCreateModal = ref(false)

// 新建用例
const newCase = ref({
  name: '',
  description: '',
  category: ''
})

// 选项配置
const categoryOptions = [
  { label: '错误分析', value: 'error' },
  { label: '性能分析', value: 'performance' },
  { label: '安全分析', value: 'security' },
  { label: '业务分析', value: 'business' }
]

// 模拟数据
const mockCases = [
  {
    id: 1,
    name: '错误日志分析',
    description: '分析应用错误日志，识别常见错误模式',
    category: 'error'
  },
  {
    id: 2,
    name: '性能监控分析',
    description: '监控系统性能指标，识别性能瓶颈',
    category: 'performance'
  }
]

// 计算属性
const filteredCases = computed(() => {
  if (!searchText.value) return mockCases
  
  return mockCases.filter(case_ => 
    case_.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
    case_.description.toLowerCase().includes(searchText.value.toLowerCase())
  )
})

// 方法
function handleImport() {
  console.log('导入用例')
}

function handleCreateCase() {
  console.log('创建用例:', newCase.value)
  showCreateModal.value = false
  
  // 重置表单
  newCase.value = {
    name: '',
    description: '',
    category: ''
  }
}
</script>

<style scoped>
.analysis-case {
  max-width: 1200px;
  margin: 0 auto;
}
</style> 